<template>
  <lay-container
    fluid="true"
    style="padding: 10px">
    <lay-row :space="10">
      <lay-col :md="24">
        <lay-card>
          <lay-form
            style="margin-top: 20px"
            :model="queryParams"
            size="xs">
            <lay-row>
              <lay-col :md="16">
                <lay-form-item label="部门:">
                  <TreeSelect
                    class="w-[100%]"
                    v-model="searchAccount"
                    v-model:hasChildValue="queryParams.hasChildValue"
                    v-model:hasStopValue="queryParams.hasStopValue"
                    hasChild
                    :hasStop="true" />
                </lay-form-item>
              </lay-col>
              <lay-col :md="8">
                <lay-form-item label="工号:">
                  <lay-input v-model="searchEmail"></lay-input>
                </lay-form-item>
              </lay-col>
            </lay-row>
            <lay-row>
              <lay-col :md="8">
                <lay-form-item label="中文名:">
                  <lay-input v-model="searchEmail"></lay-input>
                </lay-form-item>
              </lay-col>
              <lay-col :md="8">
                <lay-form-item label="姓名:">
                  <lay-input v-model="searchEmail"></lay-input>
                </lay-form-item>
              </lay-col>
              <lay-col :md="8">
                <lay-form-item label="性别:">
                  <lay-select
                    v-model="queryParams.email"
                    style="width: 100%"
                    placeholder="请选择">
                    <lay-select-option
                      :value="1"
                      label="学习" />
                    <lay-select-option
                      :value="2"
                      label="编码" />
                    <lay-select-option
                      :value="3"
                      label="运动" />
                  </lay-select>
                </lay-form-item>
              </lay-col>
              <lay-col :md="8">
                <lay-form-item label="员工状态:">
                  <lay-select
                    v-model="queryParams.email"
                    style="width: 100%"
                    placeholder="请选择">
                    <lay-select-option
                      :value="1"
                      label="学习" />
                    <lay-select-option
                      :value="2"
                      label="编码" />
                    <lay-select-option
                      :value="3"
                      label="运动" />
                  </lay-select>
                </lay-form-item>
              </lay-col>
              <lay-col :md="8">
                <lay-form-item label="职位:">
                  <lay-select
                    v-model="queryParams.email"
                    style="width: 100%"
                    placeholder="请选择">
                    <lay-select-option
                      :value="1"
                      label="学习" />
                    <lay-select-option
                      :value="2"
                      label="编码" />
                    <lay-select-option
                      :value="3"
                      label="运动" />
                  </lay-select>
                </lay-form-item>
              </lay-col>
              <lay-col :md="8">
                <lay-form-item label="入职日期:">
                  <lay-date-picker
                    style="width: 100%"
                    v-model="queryParams.email"
                    allowClear></lay-date-picker>
                </lay-form-item>
              </lay-col>
              <lay-col :md="8">
                <lay-form-item label="离职日期:">
                  <lay-date-picker
                    style="width: 100%"
                    v-model="queryParams.email"
                    allowClear></lay-date-picker>
                </lay-form-item>
              </lay-col>
              <lay-col :md="16">
                <lay-form-item label-width="0">
                  <div class="text-right">
                    <lay-button
                      type="primary"
                      @click="toSearch"
                      >查询</lay-button
                    >
                    <lay-button @click="toReset">重置</lay-button>
                  </div>
                </lay-form-item>
              </lay-col>
            </lay-row>
            <lay-row>
              <lay-col :md="8">
                <lay-form-item label="日期区间:">
                  <a-range-picker style="width: 254px; marginbottom: 20px" />
                </lay-form-item>
              </lay-col>
            </lay-row>
          </lay-form>
        </lay-card>
      </lay-col>
      <lay-col :md="24">
        <lay-card>
          <lay-table
            :page="page"
            :columns="columns"
            :dataSource="dataSource"
            v-model:selectedKeys="selectedKeys"
            size="sm"
            @row="rowClick"
            @change="change">
            <template v-slot:username="{ data }">
              {{ data.username }}
            </template>
            <template v-slot:password="{ data }">
              {{ data.password }}
            </template>
          </lay-table>
        </lay-card>
      </lay-col>
    </lay-row>
  </lay-container>
</template>

<script lang="ts" setup>
import { ref, watch, onMounted } from 'vue';
import { layer } from '@layui/layer-vue';
import { getAttenList } from '@/api/module/dept'

const selectedKeys = ref(['1']);
const checkbox = ref(true);
const defaultToolbar = ref(true);

const queryParams = ref({});

const page = ref({ total: 100, limit: 10, current: 2 });

const columns = [
  {
    title: '工资编号',
    width: '80px',
    key: 'empNo',
    sort: 'desc',
    ellipsisTooltip: true,
  },
  {
    title: '姓名',
    width: '180px',
    key: 'empName',
    sort: 'desc',
    ellipsisTooltip: true,
  },
  {
    title: '部门名称',
    width: '155px',
    fixed: 'left',
    key: 'deptName',
    sort: 'desc',
    ellipsisTooltip: true,
  },
  {
    title: '部门代码',
    width: '120px',
    key: 'deptNo',
    sort: 'desc',
    ellipsisTooltip: true,
  },
  {
    title: '打卡设备',
    key: 'device',
    sort: 'desc',
    ellipsisTooltip: true,
  },
  {
    title: '打卡地址',
    width: 'addr',
    key: 'age',
    sort: 'desc',
    ellipsisTooltip: true,
  },
  // {
  //   title: '打卡日期',
  //   width: '120px',
  //   key: 'city',
  //   sort: 'desc',
  //   ellipsisTooltip: true,
  // },
  {
    title: '打卡时间',
    width: '150px',
    key: 'clockTime',
    sort: 'desc',
    ellipsisTooltip: true,
  },

];

const dataSource = ref([])

const rowClick = function (data: any) {};

const rowDoubleClick = function (data: any) {};

const change = function ({ current, limit }: any) {
  layer.msg('current:' + current + ' limit:' + limit);
};
function toSearch() {
  layer.load(2, { time: 3000 });
}
const searchAccount = ref('');
const searchEmail = ref('');
function toReset() {
  searchAccount.value = '';
  searchEmail.value = '';
}

const getList = async () => {
  const res = await getAttenList();
  dataSource.value =res.data
};

onMounted(() => {
  getList();
});

// return {
//   columns,
//   dataSource,
//   selectedKeys,
//   checkbox,
//   defaultToolbar,
//   page,
//   rowClick,
//   rowDoubleClick,
//   change,
//   toReset,
//   toSearch,
//   searchAccount,
//   searchEmail
// }
</script>
